import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames'

// 引入组件配置文件
// lcData['shenshiqu_statistic']
import './animate.css'
import './style.less'

const Panel = (props) => {
  const { property, boderDebugger } = props;

  const [hideIcon, setHideIcon] = useState(0)
  const classTran = classNames("grid-item", {
    [`grid-x-${property.attrs.col}`]: property.attrs.col,
    [`grid-y-${property.attrs.row}`]: property.attrs.row,
    [`grid-w-${property.attrs.width}`]: property.attrs.width,
    [`grid-h-${property.attrs.height}`]: property.attrs.height,
  }, "grid_padding")
  const classPanel = classNames("sti-panel", {
    ['boder-debugger']: boderDebugger
  })
  const pValue = {
    'pCfg': property
  }
  return (
    <div className={classTran}
      style={{ 'z-index': property.attrs.zIndex }} >
      <div className={classPanel} style={property.panelStyle} >
        <div className="sti-panel_inner" >
          <div className="sti-panel_body" style={{ padding: "10px", boxSizing: "border-box" }}>
            {
              property.component ? <property.component value={pValue} adds={property.adds} num={property.num} imgs={property.imgs} text={property.text} property={property}></property.component> : <div>功能暂无</div>
            }
          </div>
        </div>
      </div>
    </div>
  )
}

Panel.propTypes = {
  property: PropTypes.object,
  boderDebugger: PropTypes.bool
};
Panel.defaultProps = {
  boderDebugger: false
}
export default Panel;
